// 底层基于single-spa
import { registerMicroApps, start, initGlobalState } from 'qiankun'
const state = {
    name: 'zf',
    age: 12
}
const actions = initGlobalState(state)
actions.onGlobalStateChange((state, prev) => {
    console.log(state, prev);
})
const loader = (loading) => {
    console.log(loading);
}
registerMicroApps([
    {
        // 子应用名称
        name: 'm-vue',
        // 子应用入口
        entry: '//localhost:20000',
        // 渲染到哪个容器
        container: '#container',
        // 访问容器应用的哪个路由可以转发到该子应用
        activeRule: '/vue',
        loader
    },
    {
        // 子应用名称
        name: 'm-react',
        // 子应用入口
        entry: '//localhost:30000',
        // 渲染到哪个容器
        container: '#container',
        // 访问容器应用的哪个路由可以转发到该子应用
        activeRule: '/react',
        loader
    }, 
    {
        // 子应用名称
        name: 'm-vue2',
        // 子应用入口
        entry: '//localhost:40000',
        // 渲染到哪个容器
        container: '#container',
        // 访问容器应用的哪个路由可以转发到该子应用
        activeRule: '/vue2',
        loader
    }
], {
    // 生命周期
    beforeLoad: () => {
        console.log('beforeLoad');
    },
    beforeMount: () => {
        console.log('beforeMount');
    },
    afterMount: () => {
        console.log('afterMount');
    },
    beforeUnmount: () => {
        console.log('beforeUnmount');
    },
    afterUnmount: () => {
        console.log('afterUnmount');
    }
})
// 启动
start({
    // 沙箱
    sandbox: {
        // 实验性样式隔离
        // experimentalStyleIsolation: true
        // 严格的样式隔离
        strictStyleIsolation: true
    }
})